<template>
  <div class="navbar">
    <nav class="sidebar">
      <ul class="menu">
        <li
          v-for="(item1, index) in navTree"
          :key="index"
          class="forRealitive"
          @click="showToggle(index)"
        >
          <div>{{item1.menuName}}</div>
          <ul class="menu-sub" v-show="index === isShow">
            <li v-for="(item2, idx) in item1.children" :key="idx">
              <router-link :to="item2.menuUrl">{{item2.menuName}}</router-link>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Cookies from "js-cookie";
import api from '@/http/api'
export default {
  name:'navBar',
  components: {
  },
  data(){
    return{
      userName: Cookies.get('user'),
      navTree:[],
      navTree2:[],
      isShow:0,
    }
  },
  methods: {
      showToggle: function (index) {
        this.isShow = index
      },
      handleHide: function () {
        this.isShow = !this.isShow
      },
    get_router(){

      api.menu.findNavTree({"authType":1,"userName":this.userName}).then(res=>{
        let newArry=[]
        res.authorityList.forEach(item=>{
          if(item.menuName=='我的客户(移动端)'||item.menuName=='商务合作中心(移动端)'){
            newArry.push(item)
          }
        })
        this.navTree=newArry
      })
    }
  },
  mounted(){
    this.get_router()
    this.isShow = -1//避免第一个渲染
  },
  computed: {
    ...mapState({
      appName: state=>state.app.appName,
      themeColor: state=>state.app.themeColor,
      collapse: state=>state.app.collapse,
      navTree: state=>state.menu.navTree
    })
  }
};
</script>

<style lang='scss' scoped>
.navbar{
  .sidebar{
    .menu{
      float: left;
      font-size: 0.5rem;
      >li{
        list-style: none;
        a{
          text-decoration: none;
        }
        .menu-sub{
          >li{
            list-style: none;
            a{
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}
</style>
